<template>
  <div class="wholesale-detail">
    <div class="block">
      <header>
        <h2>订单信息</h2>
      </header>
      <section>
        <el-row :gutter="80">
          <el-col :span="8">
            订单编号
            <span>{{ orderDetail.orderCode || '' }}</span>
          </el-col>
          <el-col :span="8">
            订单状态
            <span>{{ orderDetail.orderStatusName || '' }}</span>
          </el-col>
          <el-col :span="8">
            订单类型
            <span>{{ orderDetail.orderTypeName || '' }}</span>
          </el-col>
          <el-col :span="8">
            供应商
            <span>{{ supplierVo.vendorName || '' }}</span>
          </el-col>
          <el-col :span="8">
            渠道
            <span>{{ orderDetail.channelTypeName || '' }}</span>
          </el-col>
          <el-col :span="8">
            下单时间
            <span>{{ orderDetail.orderDateTime || '' }}</span>
          </el-col>
          <el-col :span="8">
            下单人
            <span>{{ orderDetail.commitUser ? orderDetail.commitUser : '' }}</span>
          </el-col>
          <!-- <el-col :span="8">
            支付方式
            <span>{{orderDetail.payType === 1?'线下支付':"线上支付"}}</span>
          </el-col>-->
          <!-- <el-col :span="10">
            订单类型
            <span>{{orderDetail.orderTypeName?orderDetail.orderTypeName:"-"}}</span>
          </el-col>-->
          <el-col :span="8">
            备注信息
            <el-tooltip
              class="tiem"
              effect="dark"
              :content="orderDetail.remark ? orderDetail.remark : ''"
              placement="top-start"
            >
              <span>{{ orderDetail.remark ? orderDetail.remark : '' }}</span>
            </el-tooltip>
          </el-col>
          <!-- 有字段时展示，否则隐藏  -->
          <el-col v-if="orderDetail.closeCount != 0" :span="8">
            关闭数量
            <span>{{ orderDetail.closeCount ? orderDetail.closeCount : '' }}</span>
          </el-col>
          <el-col v-if="orderDetail.closeCount != 0" :span="8">
            退款金额
            <span>{{ orderDetail.refundAmount ? orderDetail.refundAmount : '' }}</span>
          </el-col>
          <el-col v-if="orderDetail.cancelCount != 0" :span="8">
            取消数量
            <span>{{ orderDetail.cancelCount ? orderDetail.cancelCount : '' }}</span>
          </el-col>
          <el-col :span="8" v-if="orderDetail.orderCodeRelate" style="color:red;">
            关联采购单号
            <span>{{ orderDetail.orderCodeRelate ? orderDetail.orderCodeRelate : '' }}</span>
          </el-col>
          <el-col :span="8" v-if="orderDetail.orderCodeReturn" style="color:red;">
            关联退货单号
            <span>{{ orderDetail.orderCodeReturn ? orderDetail.orderCodeReturn : '' }}</span>
          </el-col>
        </el-row>
      </section>
    </div>
    
    <div class="block">
      <header>
        <h2>产品信息</h2>&nbsp;
        <p>( 产品总数量：{{orderDetail.productCount}} )</p>
      </header>
      <section>
        <el-editable
          v-loading="tableLoading"
          height="400"
          :columns="C0LUMNS"
          :payload="payloadProducts"
          :row-class-name="tableRowClassName"
          :need-pagination="true"
          @reload="reloadProductData"
        />
      </section>
    </div>
    
    <div v-if="Number(orderDetail.isSeqNoManagement)" class="block">
      <header>
        <h2>序列号信息（数量：{{orderDetail.productSeqNoCount || 0}}）</h2>
      </header>
      <section>
        <el-editable
          height="400"
          stripe
          :columns="SERIAL"
          :payload="payloadSerialList"
          :need-pagination="true"
          @reload="findProductSnInfoReload"
        />
      </section>
    </div>
    <div class="block">
      <!-- <header>
        <h2>附加信息</h2>
      </header> -->
      <section>
        <!-- <p v-if="orderAppendPOS.length === 0" style="color:#999999">
          暂无信息
        </p> -->
        <el-tabs>
          <el-tab-pane label="附加信息">
            <el-row :gutter="80">
              <el-col v-for="(item, index) in orderAppendPOS" :key="index" :span="8">
                {{ item.attributeName }}
                <span>{{ item.attributeValue ? item.attributeValue : '' }}</span>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="附件">
            <!-- 其他附件 -->
            <section class="table-section">
              <el-editable :columns="ACCESSORIES_COLUMNS" :data="orderDetail.commonFilePOList"   height="200">
                <template slot="default-index" slot-scope="scope">
                  {{ scope.$index + 1 }}
                </template>
                <template slot="default-fileUrl" slot-scope="scope">
                  <TableUpload
                    :imgname="scope.row.fileName"
                    :imgsrc="scope.row.fileUrl"
                    :keystr="scope.$index"
                  />
                </template>
              </el-editable>
            </section>
          </el-tab-pane>
        </el-tabs>
      </section>
    </div>

    <div v-if="orderDetail.orderStatus === 7" class="block">
      <header>
        <h2>支付信息：</h2>&nbsp;
      </header>
      <section>
        <el-editable
          v-loading="tableLoading"
          height="400"
          :columns="PAY_INFO"
          :data="payDetailData"
          :row-class-name="tableRowClassName"
        >
        <template slot="default-fileUrl" slot-scope="scope">

        </template>
        </el-editable>
      </section>
    </div>

    <el-dialog title="详情" :modal="true" custom-class="dialog-custom" :visible.sync="dialogVisible" width="70%">
      <el-editable
        :data="receivData.content"
        :loading="receivDataLoading"
        stripe
        :columns="RECEIVE_C0LUMNS"
        :payload="receivData"
        :need-pagination="true"
        height="400"
        @reload="reloadReceiv"
      />
    </el-dialog>
  </div>
</template>
<script src="./index.js"></script>

<style lang="less" src="./index.less" scoped></style>
